<template>
  <div class="u-login-about-container login-account">
      <div class="login-top-text">
        <p>您好，</p>
        <p>欢迎来到友牧农场</p>
      </div>
      <ul class="account-center">
        <li>
            <input type="tel" placeholder="请输入手机号码" maxlength="11" v-model="phone">
        </li>
        <li v-show="!loginByPhone">
            <input :type="inputType" placeholder="请输入密码" maxlength="16" v-model="password">
            <van-icon :name="iconName" :class="className" @click='changeInputType' />
        </li>
        <li v-show="loginByPhone">
          <input type="tel" placeholder="请输入验证码" maxlength="4" v-model="authCode">
          <button class="u-send-msg-btn" v-if="!sendMsgFlag" @click="sendMsg" :disabled="sendMsgFlag">{{sendBtnText}}</button>
          <span class="times color-primary" v-if="sendMsgFlag">{{times}}</span>
        </li>
      </ul>
      <van-button round class="u-btn-default u-bg-gradient-light login-btn" @click="login()">登录</van-button>
      <div class="other-operate">
        <span @click="changeLoginType">{{loginByPhone ? '密码登录' : '验证码登录'}}</span>
        <div class="other-operate-right">
          <span @click="jumpView('/forgetPassword')">忘记密码</span>
          <span @click="jumpView('/register')">快速注册</span>
        </div>
      </div>
  </div>
</template>

<script>
import axios from 'axios';
export default {
  data() {
    return {
      phone: '', //手机号
      password: '', //密码
      authCode: '', //验证码
      loginByPhone: true, //验证码登录
      sendMsgFlag: false, //发送验证码按钮状态
      sendBtnText: '发送验证码', //发送验证码文字
      times: '60s', //倒计时文字
      changeInputTypeFlag: false, //修改input类型
      inputType: 'password', //input类型
      iconName: 'closed-eye', //图标
      className: 'inp-icon color-gray' //类名
    }
  },
  methods: {
    changeLoginType() { //更换登录方式
      this.loginByPhone = !this.loginByPhone;
      this.password = '';
      this.authCode = '';
    },
    changeInputType() { //更换输入框类型
      this.changeInputTypeFlag = !this.changeInputTypeFlag;
      if(this.changeInputTypeFlag){
        this.inputType = 'text';
        this.iconName = 'eye';
        this.className = 'inp-icon color-primary';
      }else{
        this.inputType = 'password';
        this.iconName = 'closed-eye';
        this.className = 'inp-icon color-gray';
      }
    },

    sendMsg() { //发送验证码
      if(!this.$tool.validator.isEmpty(this.phone)){
        this.$tool.toast('请输入手机号')
        return;
      }

      if(!this.$tool.validator.isMobilePhone(this.phone)){ 
        this.$tool.toast('请输入正确的手机号')
        return; 
      }
      this.sendMsgAjax()
    },

    sendMsgAjax() { //验证码请求
      let postData = {
        phone: this.phone,
        smsType: 2
      }
      this.$api.post('/api/sms/send_sms', postData)
        .then((res) => {
          this.sendMsgFlag = true;
          this.countdown();
        })
    },

    countdown() { //倒计时
      let time = 60;
      let t = setInterval(() => {
          time--;
          this.times = `${time}s`;
          if(time <= 0){
            clearInterval(t)
            this.sendBtnText = '重新获取';
            this.sendMsgFlag = false;
            this.times = '60s';
          }
      }, 1000)
    },

    jumpView(viewName) { //页面跳转
      this.$router.push({path: viewName});
    },

    login(){ //登录
      if(!this.$tool.validator.isEmpty(this.phone)){
        this.$tool.toast('请输入手机号')
        return;
      }

      if(!this.$tool.validator.isMobilePhone(this.phone)){
        this.$tool.toast('请输入正确的手机号')
        return;
      }

      if(this.loginByPhone){ //验证码登录

        if(!this.$tool.validator.isEmpty(this.authCode)){
          this.$tool.toast('请输入验证码')
          return;
        }

        if(!this.$tool.validator.isMsgCode(this.authCode)){
          this.$tool.toast('请输入4位数字验证码')
          return;
        }
        
        this.loginByPhoneAjax()

      }else{ //密码登录

        if(!this.$tool.validator.isEmpty(this.password)){
          this.$tool.toast('请输入密码')
          return;
        }
        
        if(!this.$tool.validator.isPassword(this.password)){
          this.$tool.toast('请输入6~16位数字字母组合密码')
          return;
        }
        
        this.loginByPasswordAjax()
      }
    },

    loginByPasswordAjax() { //登录请求-密码
      let postData = {
        phone: this.phone,
        pwd: this.$md5(this.password),
        loginType: 1
      }
      this.$api.post('/api/user/login', postData)
        .then((res) => {
          if(res.data.jumpUrl){
            window.location.href = res.data.jumpUrl;
          }else{
            this.loginSuccess(res)
          }
        })
    },

    loginByPhoneAjax() { //登录请求-验证码
      let postData = {
        phone: this.phone,
        smsCode: this.authCode,
        loginType: 2
      }
      this.$api.post('/api/user/login', postData)
        .then((res) => {
          if(res.data.jumpUrl){
            window.location.href = res.data.jumpUrl;
          }else{
            this.loginSuccess(res)
          }
        })
    },

    loginSuccess(res) { //登录成功操作
      this.$store.commit("setToken", res.data.token); //设置token
      this.$api.get('/api/user/detail?noLoading') //获取用户信息并放入vuex中
        .then((res) => {
          this.$store.commit("setUserInfo", res.data);
          this.$tool.toast('登录成功', 800)
          setTimeout(() => {
            this.$router.push({path: '/'});
          }, 1000)
        })
    }
  },

  mounted() {
    this.$tool.addEventListenerInputFocusout()
  }
}
</script>

<style lang="scss" scoped>
  .login-account {
    .login-top-text {
      font-size: 24px;
      font-weight: 500;
      color: #344047;
      p:first-child {
        padding-top: 50px;
        margin-bottom: 10px;
      }
    }
    .account-center {
      margin-top: 35px;
      li {
        display: flex;
        align-items: center;
        width: 100%;
        height: 60px;
        font-size: 16px;
        border-bottom: 1px solid #f2f2f2;
        input {
          height: 25px;
          flex: 1;
          font-size: 16px;
          outline: none;
          border: none;
          background-color: #fff;
        }
        .inp-icon {
          margin-left: 40px;
          font-size: 20px;
        }
        .times {
          margin-left: 40px;
        }
      }
    }
    .login-btn {
      margin-top: 32px;
    }
    .other-operate {
      display: flex;
      justify-content: space-between;
      align-items: center;
      width: 100%;
      margin-top: 30px;
      color: #969C9E;
      .other-operate-right {
        span:first-child {
          margin-right: 40px;
        }
        span:last-child {
          position: relative;
        }
        span:last-child::before {
          content: "";
          position: absolute;
          top: -3px;
          left: -20px;
          width: 1px;
          height: 24px;
          background-color: #f2f2f2;
        }
      }
    }
  }
</style>